<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>公司物料表</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="companyMaterialTable">
      <el-container style="height:100%;">
        <!-- 侧边容器 添加/修改物料 -->
        <el-aside class="companyMaterialUpdate" width="30%">
          <company-material-form type="update" :company-material="updateCompanyMaterial" :dropdown-option="dropdownOption" @update="resetData">
          </company-material-form>
        </el-aside>
        <el-main class="companyMaterialQuery" width="70%">
          <search-btn-view immediate btn-text="查询物料" @before-open="resetSearch" @search="searchData">
            <template slot="append">
              <el-button type="primary" size="medium" @click="showCopmanyMaterialAddForm">添加物料</el-button>
              <el-button type="primary" size="medium" @click="disableAllCompanyMaterial">批量禁用</el-button>
            </template>
            <div slot="search-content">
              <search-form :search="search"></search-form>
            </div>
          </search-btn-view>
          <div class="companyMaterialTableDiv">
            <el-table fit stripe border :data="companyMaterialDataList" style="width: 100%" @select="checkMaterial" @select-all="checkMaterial"
              height="parent" @row-click="getCompanyMaterialDetail">
              <el-table-column auto-width prop="providerName" label="供应商" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="materialName" label="物料名称" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="model" label="规格" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="color" label="编号" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="colorDescription" label="描述" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="materialDeptName" label="物料部门" min-width="70px" align="center"></el-table-column>
              <el-table-column auto-width prop="providerNo" label="供方编号" min-width="70px" header-align="center"></el-table-column>
              <el-table-column auto-width prop="count" label="库存" min-width="70px" align="center"></el-table-column>
              <el-table-column auto-width prop="unit" label="单位" min-width="70px" align="center"></el-table-column>
              <el-table-column auto-width prop="unitPrice" label="单价" min-width="70px" align="center"></el-table-column>
              <el-table-column :resizable="false" prop="status" label="状态" width="50px" align="center"></el-table-column>
              <el-table-column :resizable="false" prop="purchaseApproval" label="是否审核" width="70px" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.purchaseApproval===1?'是':'否'}}</span>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" label="操作" width="70px" header-align="center">
                <template slot-scope="scope" v-if="scope.row.status === '使用'">
                  <el-button size="mini" type="danger" @click="disableCompanyMaterial(scope.row)">禁用</el-button>
                </template>
              </el-table-column>
              <el-table-column :resizable="false" type="selection" :selectable="isChecked" width="40px" align="center"></el-table-column>
            </el-table>
          </div>
          <div style="margin-top: 10px; text-align: right;" v-if="pagination.totalCount!==0">
            <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
              @current-change="pageChange"> </el-pagination>
          </div>
        </el-main>
      </el-container>

      <el-dialog title="添加物料" :close-on-press-escape="false" :close-on-click-modal="false" :visible.sync="isShowCopmanyMaterialAddForm" top="5vh">
        <div style="height: calc(80vh - 54px); overflow: auto">
          <company-material-form v-if="isShowCopmanyMaterialAddForm" :company-material="addCompanyMaterial" :dropdown-option="dropdownOption"
            @add="addMaterialResetData">
          </company-material-form>
        </div>
      </el-dialog>
    </div>
  </div>
</body>
<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "./css/companyMaterialForm.css",
  ], [
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/js/storageUtil.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/filterSelect.js"
  ]);

</script>
<script src="../models/customerModel.js"></script>
<script src="../models/companyMaterialTableModel.js"></script>
<script src="../customer/customerForm.js"></script>
<script src="./companyMaterialForm.js"></script>
<script src="./searchForm.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      // 搜索条件
      var search = {
        materialName: '',
        model: '',
        color: '',
        providerName: '',
        providerNo: '',
        colorDescription: '',
        defaultWarehouse: '原材料仓',
        status: 1,
        materialDept: '',
        hasCount: ''
      };

      return {
        loading: false,
        moment: moment,
        isShowCopmanyMaterialAddForm: false,
        dropdownOption: {},
        companyMaterialDataList: [],
        addResultData: null,
        updateCompanyMaterial: new CompanyMaterialTable(),
        addCompanyMaterial: new CompanyMaterialTable(),
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        checkData: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 15
        }
      };
    },
    methods: {
      showCopmanyMaterialAddForm: function () {
        var oldData = this.addCompanyMaterial;
        if (oldData == null) {
          this.addCompanyMaterial = new CompanyMaterialTable();
        }
        this.isShowCopmanyMaterialAddForm = true;
      },
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function () {
        this.pagination.currentPage = 1;
        this.setCompanyMaterialDataList(true);
      },
      resetData: function () {
        this.setCompanyMaterialDataList();
      },
      addMaterialResetData: function (data) {
        this.addResultData = data;
        this.isShowCopmanyMaterialAddForm = false;
        this.resetData();
      },
      pageChange: function () {
        this.setCompanyMaterialDataList();
      },
      setCompanyMaterialDataList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }
        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: search.status,
          providerNo: search.providerNo
        };
        var fields = ['materialName', 'model', 'color', 'colorDescription', 'providerName', 'defaultWarehouse', 'hasCount'];
        SysUtil.setPostData(postData, search, fields);

        var materialDept = search.materialDept;
        if (materialDept !== '') {
          postData.materialDeptId = materialDept.materialDeptId;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest("basicData/queryMaterialCompany", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }
          var companyMaterialDataList = res.returnData;
          for (var i = 0; i < companyMaterialDataList.length; i++) {
            var data = companyMaterialDataList[i];
            if (data.safetyStockMin === null) {
              data.safetyStockMin = undefined;
            }
            if (data.safetyStockMax === null) {
              data.safetyStockMax = undefined;
            }

            var materialDeptId = data.materialDeptId;
            if (SysUtil.isEmpty(materialDeptId) || materialDeptId === 0) {
              materialDeptId = '';
            }
            var materialDeptName = data.materialDeptName;
            if (SysUtil.isEmpty(materialDeptName)) {
              materialDeptName = '';
            }
            data.materialDeptId = materialDeptId;
            data.materialDeptName = materialDeptName;
            if (materialDeptId !== '' && materialDeptName !== '') {
              data.materialDept = {
                materialDeptId: materialDeptId,
                materialDeptName: materialDeptName
              };
            } else {
              data.materialDept = '';
            }
          }
          self.companyMaterialDataList = companyMaterialDataList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          self.cleanMaterial();
          return companyMaterialDataList;
        }).catch(function (error) {
          self.loading = false;
          return [];
        });
      },
      getCompanyMaterialDetail: function (row) {
        this.updateCompanyMaterial = new CompanyMaterialTable(row);
        this.addCompanyMaterial = new CompanyMaterialTable(row);
      },
      disableCompanyMaterial: function (rowData) {
        rowData = _.cloneDeep(rowData);
        delete rowData.materialDept;
        this.loading = true;
        var self = this;
        ajaxRequest("basicData/disableCompanyMaterial", rowData).then(function (res) {
          self.$alert(res, "信息");
          self.setCompanyMaterialDataList();
        }).catch(function () {
          self.loading = false;
        });
      },
      cleanMaterial: function () {
        this.updateCompanyMaterial = new CompanyMaterialTable();
        this.addCompanyMaterial = new CompanyMaterialTable();
        this.checkData = [];
      },
      checkMaterial: function (selection) {
        this.checkData = selection;
      },
      isChecked: function (row, index) {
        return row.status === '使用';
      },
      disableAllCompanyMaterial: function () {
        var checkData = this.checkData;
        checkData = _.cloneDeep(checkData);
        if (checkData.length === 0) {
          this.$alert("请勾选需要禁用的物料", "信息");
          return;
        }
        for (var i = 0; i < checkData.length; i++) {
          var data = checkData[i];
          delete data.materialDept;
        }
        this.loading = true;
        var self = this;
        ajaxRequest("basicData/disableAllCompanyMaterial", {
          companyMaterialList: JSON.stringify(checkData)
        }).then(function (res) {
          self.$alert(res, "信息");
          self.setCompanyMaterialDataList();
        }).catch(function () {
          self.loading = false;
        });
      }

    },
    components: {
      SearchBtnView: SearchBtnView,
      CompanyMaterialForm: CompanyMaterialForm,
      SearchForm: SearchForm
    }
  });

</script>
<style>
  .companyMaterialTable {
    height: calc(100% - 20px);
    overflow: auto;
    padding: 10px 20px;
  }

  .companyMaterialTable .companyMaterialQuery {
    padding: 0;
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  .companyMaterialTable .companyMaterialTableDiv {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
